<template>
    <div>
        6666
        <el-form ref="loginForm" :rules="loginRules" :model="ruleForm">
            <el-form-item>
                <el-input v-model="ruleForm.username" type="text" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item>
                <el-input v-model="ruleForm.password"  type="text" placeholder="请输入密码" />
            </el-form-item>
        </el-form>
				<el-form-item>
				<el-button type="primary" :loading="loading" @click="handleLogin(loginForm)">登入</el-button>
    	</el-form-item>
    </div>
</template>

<script setup>
    import { reactive, ref } from 'vue';
    import sessionStorage from "../../utils/session.js"
    import {
			login
    } from '@/api/user.js'
    import {
			getdate
    } from "@/utils/base.js"

    const loginForm = ref();
		const loading = ref(false);

		const validateUsername = (rule, value, callback) => {
				if (value.trim().length < 5) {
					callback(new Error("用户名长度不能小于5位"));
				} else {
					callback();
				}
		};

		const validatePass = (rule, value, callback) => {
				if (value.length < 6) {
					callback(new Error("密码不能小于6位"));
				} else {
					callback();
				}
		};

    const ruleForm = reactive({
			username: '',
			password: '',
    })

		const loginRules = reactive({
			username: [{ required: true, validator: validateUsername, trigger: 'blur' }],
			password: [{ required: true, validator: validatePass, trigger: 'blur' }]
		})

		const handleLogin = (loginForm) => {
			if (!loginForm) return;
			loginForm.validate((valid) => {
    		if (valid) {
						loading.value = true;
						login(ruleForm.username, ruleForm.password).then(res => {
							let obj=Object.assign({},res.data);
							Object.keys(obj).forEach(function(key) {
								obj.createTime = getdate(obj.createTime);
								obj.updateTime = getdate(obj.updateTime);
							});
							sessionStorage.setSession('shsUserInfo', JSON.stringify(obj))
							vue.$message({
								message: res.message,
								type: 'success'
							});
							loading.value = false;
							this.$router.push("/")
						}).catch(() => {
							loading.value = false;
						});
					} else {
						console.log("参数验证不合法！");
						return false;
					}
  		})
		}
    
</script>

<style>

</style>